<template>
  <el-dialog title="新增车辆品牌" :visible.sync="dialogVisible" @close="close" :close-on-click-modal="false" @opened="opened" >
    <vue-form 
      ref="vueForm"
      :formItem="form_item"
      :fromHandler="form_handler"
      :formData="form_data"
    >
      <template v-slot:logo>
        <div class="upload-img-wrap">
          <div class="upload-img">
            <img v-show="logo_current" :src="logo_current" />
          </div>
          <ul class="img-list">
            <li v-for="item in logo" :key="item.id" @click="logo_current = item.img">
              <img :src="item.img" :alt="item.name">
            </li>
          </ul>
        </div>
      </template>
    </vue-form>
  </el-dialog>
</template>

<script>
import { BrandLogo, BrandAdd, BrandDetailed, BrandEdit } from "@/api/brand.js"
import VueForm from "@c/form";


export default {
  components: {
    VueForm
  },
  props: {
    flagVisible:{type:Boolean,default:false},
    id:{type:String,default:""}
  },
  watch: {
    flagVisible: {
      handler(newValue, oldValue) {
        this.dialogVisible = newValue;
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      form_handler: [
        {label: "确定",key:"submit",type:"primary",handler:()=>this.onSubmit()},
        {label: "重置",key:"reset",type:"danger",handler:()=>this.reset()}
      ],
      form_data: {
        nameCh: "",
        nameEn: "",
        imgUrl: "",
        status: "",
        content: ""
      },
      form_item: [
        {type:"Input",label:"品牌中文",prop:"nameCh",required:true,},
        {type:"Input",label:"品牌英文",prop:"nameEn",required:true,},
        {type:"Slot",slotName:"logo",label:"Logo",required: true},
        {type:"Radio",label:"禁启用",prop:"status",required:true,options: this.$store.state.config.radio_disabled,}    
      ],
      logo: [],
      logo_current: "",
    }
  },
  methods: {
    opened() {
      if(this.id) {
        this.brandDetail();
      }
      this.getBrandLogo();
    },
    brandDetail() {
      BrandDetailed({id:this.id})
        .then((res) => {
          this.form_data = res.data;
          this.logo_current = res.data.imgUrl;
        })
    },
    getBrandLogo() {
      if(this.logo.length !== 0) {
        return false;
      }
      BrandLogo()
        .then((res) => {
          const data = res.data;
          if(data) this.logo = data;
        })
    },
    close() {
      this.reset("form");
      this.$emit("update:flagVisible",false)
    },
    onSubmit() {
      this.form_data.imgUrl = this.logo_current;
      this.id ? this.update() : this.add();
    },
    add() {
      BrandAdd(this.form_data)
        .then((res) => {
          this.$message({
            type: "success",
            message: res.message
          })
          this.reset("form");
          this.$emit("reload");
        })
    },
    update() {
      const requestData = JSON.parse(JSON.stringify(this.form_data));
      requestData.id = this.id;
      BrandEdit(requestData)
        .then((res) => {
          this.$message({
          type: "success",
          message: res.message
        })
          this.reset("form");
          this.$emit("reload");
        })
    },
    reset(formName) {
      this.logo_current = "";
      this.$refs.vueForm.$refs[formName].resetFields();
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-img-wrap {
  display: flex;
  .upload-img {
    position: relative;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    cursor: pointer;
    line-height: 146px;
    vertical-align: top;
    text-align: center;
    &:before {
      content: "+";
      font-size: 50px;
      font-weight: 300px;
      color: #ccc;   
    }
    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
  .img-list {
    flex: 1;
    padding-left: 30px;
    li {
      float: left;
      width: 60px;
      height: 60px;
      margin: 0 10px;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>